<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="../favicon.ico" />
    <title>showdowns demo</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        border: none;
      }

      html {
        box-sizing: border-box;
        font-size: 62.5%;
        line-height: 1.5;
        height: 100%;
      }

      *,
      :after,
      :before {
        box-sizing: inherit;
      }

      body {
        background: #f9f9f9;
        min-height: 100%;
        position: relative;
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji,
          Segoe UI Emoji;
        -webkit-font-smoothing: antialiased;
        font-size: 1.5rem;
      }

      code {
        background-color: #f8f8f8;
        border-color: #dfdfdf;
        color: #333;
      }

      .workspace-container {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 5px;
        height: 5px;
      }

      ::-webkit-scrollbar-track {
        background: rgb(241, 241, 241);
        border-radius: 0;
      }

      ::-webkit-scrollbar-thumb {
        cursor: pointer;
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.25);
        transition: color 0.2s ease;
      }

      ::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(0, 0, 0, 0.15);
      }

      ::-webkit-scrollbar-thumb:hover {
        background: rgba(128, 135, 139, 0.8);
      }
    </style>
    <link rel="stylesheet" href="../dist/showdowns.min.css" />
  </head>

  <body>
    <div id="main" class="workspace-container main-toc-row"></div>
    <script src="../dist/showdowns.min.js"></script>
    <script>
      (function(element) {
        showdowns.setShowdownOptions({
          flavor: "github"
        });
        showdowns.setPlantumlOptions({
          imageFormat: "svg"
        });
        showdowns.setVegaOptions({
          renderer: "svg"
        });
        showdowns.init();
        let md = "";
        let mdCssTypes = null;
        window
          .fetch("https://jhuix.github.io/showdowns/showdowns-features.md")
          .then(function(response) {
            if (response.ok) {
              return response.text();
            }
          })
          .then(function(text) {
            md = text;
            return window.fetch("https://jhuix.github.io/showdowns/Showdown's-Markdown-syntax.md");
          })
          .then(function(response) {
            if (response.ok) {
              return response.text();
            }
          })
          .then(function(text) {
            md = md + `\n\n# Showdown's Markdown syntax\n\n` + text;
            showdowns
              .makeHtml(md, csstypes => {
                mdCssTypes = csstypes;
              })
              .then(res => {
                if (typeof res === 'object') {
                  element.innerHTML = res.html;
                  showdowns.completedHtml(res.scripts);
                } else {
                  element.innerHTML = res;
                }
              })
              .catch(err => {
                element.innerText = err;
              });
          })
          .catch(function(error) {
            console.log(error);
            if (md) {
              showdowns
                .makeHtml(md, csstypes => {
                  mdCssTypes = csstypes;
                })
                .then(res => {
                  if (typeof res === 'object') {
                    element.innerHTML = res.html;
                    showdowns.completedHtml(res.scripts, '.showdowns');
                  } else {
                    element.innerHTML = res;
                  }
                })
                .catch(err => {
                  element.innerText = err;
                });
            }
          });
      })(document.getElementById("main"));
    </script>
  </body>
</html>
